<template>
  <Crumbs :title="'Order information'" />

  <!-- table -->
  <el-row>
    <el-col :span="16">
      <el-card shadow="hover" class="box-card tinformationTab">
        <el-tabs
          @tab-change="tabChange"
          v-model="activeName"
          class="order-tabs"
        >
          <el-tab-pane label="Product information" :name="0" />
          <el-tab-pane label="Shipping service" :name="1" />
          <el-tab-pane label="Dispute" :name="2">
            <template #label>
              <img
                v-if="route.query.c === 'okDisput'"
                class="gth"
                src="@/assets/icons/gth.svg"
                alt=""
                srcset=""
              />
              <div style="margin-left: 5px">Dispute</div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!--  -->
      <!-- information -->
      <div v-show="activeName === 0">
        <Information />
      </div>
      <!-- service -->
      <div v-show="activeName === 1">
        <Service />
      </div>
      <!-- Dispute -->
      <div v-show="activeName === 2">
        <NoDisput
          :type="route.query.type"
          v-if="route.query.type && route.query.c !== 'okDisput'"
        />
        <Disput v-else :type="route.query.type" />
      </div>
    </el-col>
    <el-col class="or-col" :span="8">
      <CardLeft type="OrderDetails" />
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import Crumbs from "@/components/Crumbs/index.vue";
import CardLeft from "@/components/CardLeft/index.vue";
import { ref, onMounted } from "vue";
import NoDisput from "./components/NoDisput.vue";
import Disput from "./components/Disput.vue";
import Information from "./components/Information.vue";
import Service from "./components/Service.vue";
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query, 1212);

const activeName = ref(1);

onMounted(() => {
  activeName.value = Number(route.query.activeName || 0);
});

const tabChange = (e: any) => {
  console.log(e);

  activeName.value === e;
};
</script>
<style lang="scss" scoped>
.or-col {
  padding-left: 30px;
}
.tinformationTab {
  // margin: 20px 0;
  ::v-deep .el-card__body {
    padding: 0 !important;
  }
  .card-left {
    padding: 20px;
  }
}
::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding: 0 20px;
}
::v-deep .el-tabs__nav-wrap {
  margin-bottom: -3px; //-3px
}
::v-deep .el-tabs__active-bar {
  bottom: 2px;
}
</style>
